<template>
  <div>
    <!-- <p>test page</p> -->
    <div id="testmap"></div>
  </div>
</template>

<script>
import MyControl from '@/components/class/myControl'
import MyOverlay from '@/components/class/myOverlay'

export default {
  name: 'test',
  data() {
    return {
      locationIcon: new window.BMap.Icon(
        require('@/assets/location.svg'),
        new window.BMap.Size(40, 40),
        {
          imageSize: new window.BMap.Size(40, 40)
        }
      ),
      map: null,
      prevMarker: null,
      curMarker: null
    }
  },
  mounted() {
    const opts = {
      width: 250,
      height: 100,
      title: 'heiheihei'
    }
    const styleOptions = {
      strokeColor: 'red', //边线颜色。
      fillColor: 'blue', // 填充颜色。当参数为空时，圆形将没有填充效果。
      strokeWeight: 3, //边线的宽度，以像素为单位。
      strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
      fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
      strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    this.map = new window.BMap.Map('testmap')
    // this.map.setMapStyle({
    //   style: 'midnight'
    // })
    const mapClickHandler = e => {
      console.log('您点击了1次地图。')
      this.map.removeEventListener('click', mapClickHandler)
    }
    this.map.addEventListener('click', mapClickHandler)
    const point = new window.BMap.Point(116.404, 39.915)
    this.map.centerAndZoom(point, 18)
    const traffic = new window.BMap.TrafficLayer() // 此类表示交通流量图层
    traffic.getTilesUrl = () => require('@/assets/logo.png')
    const myOverlay = new MyOverlay(this.map.getCenter(), 100, 'red')
    // 同一时刻只能有一个信息窗口在地图上打开
    const infoWindow = new window.BMap.InfoWindow(
      'shen me gui' /* String | HTMLElement*/,
      opts
    )
    // this.map.panTo(new BMap.Point(116.409, 39.918));
    const bounds = this.map.getBounds()

    const lngMinX = bounds.getSouthWest().lng
    const lngMaxX = bounds.getNorthEast().lng
    const latMinY = bounds.getSouthWest().lat
    const latMaxY = bounds.getNorthEast().lat

    const lngSpan = +(lngMaxX - lngMinX).toFixed(6)
    const latSpan = +(latMaxY - latMinY).toFixed(6)

    this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

    // const drawingManager = new window.BMapLib.DrawingManager(this.map, {
    //   isOpen: true,
    //   enableDrawingTool: true, //是否显示工具栏
    //   drawingToolOptions: {
    //     anchor: window.BMAP_ANCHOR_TOP_RIGHT, //位置
    //     offset: new window.BMap.Size(5, 25) //偏离值
    //   },
    //   circleOptions: styleOptions, //圆的样式
    //   polylineOptions: styleOptions, //线的样式
    //   polygonOptions: styleOptions, //多边形的样式
    //   rectangleOptions: styleOptions //矩形的样式
    // })
    const myNavigationControl = new window.BMap.NavigationControl({
      // enableGeolocation: true,
      showZoomInfo: true,
      // type: window.BMAP_NAVIGATION_CONTROL_LARGE
      // type: window.BMAP_NAVIGATION_CONTROL_PAN
      // type: window.BMAP_NAVIGATION_CONTROL_SMALL
      type: window.BMAP_NAVIGATION_CONTROL_ZOOM
    })
    const myGeolocation = new window.BMap.Geolocation()
    const myScaleControl = new window.BMap.ScaleControl()
    const myMapTypeControl = new window.BMap.MapTypeControl()
    const myCopyrightControl = new window.BMap.CopyrightControl({
      anchor: window.BMAP_ANCHOR_TOP_RIGHT,
      offset: new window.BMap.Size(140, 16)
    })
    const myOverviewMapControl = new window.BMap.OverviewMapControl()
    const myGeolocationControl = new window.BMap.GeolocationControl({
      locationIcon: this.locationIcon
    })

    // this.map.addControl(myNavigationControl)
    this.map.addControl(new MyControl()) // 自定义 控制器
    this.map.addControl(myScaleControl) // 距离比例
    this.map.addControl(myGeolocationControl) // h5 定位按钮
    this.map.addControl(myOverviewMapControl) // 缩略图
    this.map.addControl(myCopyrightControl) // 版权
    this.map.addControl(myMapTypeControl) // 普通地图 卫星图 三维图

    myCopyrightControl.addCopyright({
      id: 1,
      content: `<span style="color: red;font-size: 30px;">xlm-xlm-xlm 1234567890</span>`,
      bounds
    })

    // var marker = new window.BMap.Marker(point)
    // this.map.addOverlay(marker)

    // this.map.setCurrentCity("杭州")
    // console.log(this.map.getBounds())
    const addMarker = (point, index) => {
      // 创建图标对象
      const myIcon = new window.BMap.Icon(
        require('@/assets/logo.png'),
        new window.BMap.Size(23, 25),
        {
          imageSize: new window.BMap.Size(20, 20),
          // 指定定位位置。
          // 当标注显示在地图上时，其所指向的地理位置距离图标左上
          // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
          // 图标中央下端的尖角位置。
          anchor: new window.BMap.Size(10, 25),
          // 设置图片偏移。
          // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
          // 需要指定大图的偏移位置，此做法与css sprites技术类似。
          imageOffset: new window.BMap.Size(0, 0) // 设置图片偏移
        }
      )
      // 创建标注对象并添加到地图

      const marker = new window.BMap.Marker(point, { icon: myIcon })
      marker.enableDragging()

      marker.addEventListener('click', () => {
        console.log('您点击了标注' + index)
      })
      marker.addEventListener('dragend', e => {
        console.log('当前位置：' + e.point.lng + ', ' + e.point.lat)
      })
      // console.log('您点击了标注' + index, lngSpan)

      this.map.addOverlay(marker)
    }
    // const polyline = new BMap.Polyline(
    //   [new BMap.Point(116.399, 39.91), new BMap.Point(116.405, 39.92)],
    //   { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    // )
    this.$nextTick(() => {
      // this.map.addOverlay(polyline)
      // this.map.addOverlay(myOverlay)
      // this.map.openInfoWindow(infoWindow, this.map.getCenter())
      // this.map.addTileLayer(traffic)
      // setTimeout(() => {
      // this.map.removeTileLayer(traffic)
      // traffic.hide()
      // }, 4000)
      // myGeolocation.getCurrentPosition(
      //   r => {
      //     console.log(r)
      //     if (myGeolocation.getStatus() === window.BMAP_STATUS_SUCCESS) {
      //       var mk = new window.BMap.Marker(r.point)
      //       this.map.addOverlay(mk)
      //       this.map.panTo(r.point)
      //       console.log('您的位置：' + r.point.lng + ',' + r.point.lat)
      //     } else {
      //       console.log('failed' + myGeolocation.getStatus())
      //     }
      //   }
      //   // {
      //   //   enableHighAccuracy: true,
      //   //   timeout: 3000,
      //   //   maximumAge: 10
      //   // }
      // )
    })
    // for (let i = 0; i < 10; i++) {
    //   const point = new window.BMap.Point(
    //     lngMinX + lngSpan * Math.random() * 3,
    //     latMinY + latSpan * Math.random() + 0.000015
    //   )
    //   addMarker(point, i)
    // }
    const markerClusterer = () => {
      const privateObj = {
         MAX : 500,
         markers:[],
         pt: null
      }
      for (let i = 0; i < privateObj.MAX; i++) {
        privateObj.pt = new window.BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21)
        privateObj.markers.push(new window.BMap.Marker(privateObj.pt))
      }
      const markerClusterer = new window.BMapLib.MarkerClusterer(this.map, {
        markers: privateObj.markers
      })
    }

    markerClusterer()

    // let myOverlayPromise

    // setTimeout(()=>{
    //   myOverlayPromise = myOverlay.hide()
    // }, 3000)

    // setTimeout(()=>{
    //   myOverlayPromise.then((result) => {
    //     myOverlay.toggle()
    //   })
    // }, 5000)
  }
}
</script>

<style scoped>
#testmap {
  height: 100vh;
}
</style>



